import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts';
import { useEffect } from 'react';

let charEle;
function TestChart() {
  //   const option1= {
  //     xAxis: {
  //         type: 'category',
  //         data: ['A', 'B', 'C', 'D', 'E'],
  //         axisLabel: {
  //             show: true,
  //             textStyle: {
  //                 color: '#666'
  //             }
  //         },
  //         axisTick: {
  //             alignWithLabel: true
  //         }
  //     },
  //     yAxis: {
  //         type: 'value',
  //         axisLabel: {
  //             show: true,
  //             textStyle: {
  //                 color: '#666'
  //             }
  //         },
  //         splitLine: {
  //             show: false
  //         }
  //     },
  //     series: [
  //         {
  //             name: 'Series 1',
  //             type: 'bar',
  //             data: [30, 20, 50, 40, 60],
  //             barWidth: 20,
  //             itemStyle: {
  //                 color: '#7cb5ec'
  //             },
  //             center: ['50%', '50%']
  //         },
  //         {
  //             name: 'Series 2',
  //             type: 'bar',
  //             data: [20, 30, 40, 50, 30],
  //             barWidth: 40,
  //             itemStyle: {
  //                 color: '#434348'
  //             },
  //             center: ['50%', '50%']
  //         }
  //     ]
  // };
  const option1 = {
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#666',
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#666',
        },
      },
      splitLine: {
        show: false,
      },
    },
    grid: {
      top: 'middle',
      left: '10%',
      right: '10%',
      bottom: 'middle',
    },
    series: [
      {
        name: 'Series 1',
        type: 'bar',
        data: [30, 20, 50, 40, 60],
        barWidth: 20,
        itemStyle: {
          color: '#7cb5ec',
        },
      },
      {
        name: 'Series 2',
        type: 'bar',
        data: [20, 30, 40, 50, 30],
        barWidth: 40,
        itemStyle: {
          color: '#434348',
        },
      },
    ],
  };

  /*const option = {
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#666',
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        name: 'Y1',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#666',
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: 'Y2',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#666',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: 'Series 1',
        type: 'bar',
        data: [30, 20, 50, 40, 60],
        barWidth: 20,
        itemStyle: {
          color: '#7cb5ec',
        },
        yAxisIndex: 0,
      },
      {
        name: 'Series 2',
        type: 'bar',
        data: [20, 30, 40, 50, 30],
        barWidth: 40,
        itemStyle: {
          color: '#434348',
          opacity: 0.4,
        },
        yAxisIndex: 1,
      },
    ],
  };*/
  const initChart = () => {
    const char = document.getElementById('testChart');
    if (char) {
      charEle = echarts.init(char);
      charEle.setOption(option1 as any);
      echartsResize(charEle);
    }
  };
  useEffect(() => {
    initChart();
  }, []);
  return (
    <div className="test_chart">
      <div id="testChart" className="chart" style={{ width: '300px', height: '200px' }}></div>
    </div>
  );
}

export default TestChart;
